<template>
  <div class="item">
    <el-empty
      v-show="this.renderData.length === 0"
      description="暂无任何商品数据"
    ></el-empty>
    <ul class="row row-no-gutters">
      <li class="col" v-for="item in this.renderData" :key="item.id">
        <router-link
          :to="{
            path: '/product/productDetail',
            query: { pid: item.id },
          }"
        >
          <div class="box">
            <el-image :src="item.img_url" ></el-image>
            <div class="info">
              <div class="name">{{ item.name }}</div>
              <div class="price">￥{{ item.price }}（税后）</div>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
let timer = null;
export default {
  name: "item",
  props: {
    renderData: Array,
  },
  data() {
    return {
      // renderList: null, // 这里与父组件的renderList是一个数值，但是刷新的时间要慢半秒，动画完成了这个才会刷新
    };
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  padding-top: 20px;
  transition: 0.5s;
  float: left;
  ul {
    list-style: none;
    float: left;
    padding-bottom: 10px;
    li {
      overflow: hidden;
      display: block;
      float: left;
      height: auto;
      margin-bottom: 50px;
      cursor: pointer;
      .box {
        width: calc(100% - 15px);
        margin: 0 15px 0 0;
        .info {
          margin-top: 10px;
          .name {
            width: 100%;
            text-align: left;
            margin-bottom: 5px;
            font-size: 0.9rem;
          }
          .price {
            float: right;
            font-family: "微软雅黑";
            font-size: 0.7rem;
          }
        }
        .el-image {
          width: 100%;
          transition: 0.5s;
        }
      }
    }
    li:hover {
      .el-image {
        opacity: 0.6;
      }
    }
  }
}

.col {
  width: 20%;
}
/* 小屏幕（平板，大于等于 968px） */
@media (min-width: 968px) {
  .col {
    width: 25%;
  }
}
/* 中等屏幕（桌面显示器，大于等于 1192px） */
@media (min-width: 1192px) {
  .col {
    width: 25%;
  }
}
/* 大屏幕（大桌面显示器，大于等于 1400px） */
@media (min-width: 1600px) {
  .col {
    width: 20%;
  }
}
</style>